<!DOCTYPE html>
<html>
<head>
    <title>CSS Transforms API Test: transform translate</title>
    <link rel="author" title="Your Name" href="mailto:youremail@address.com">
    <link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property">
    <link rel="help" href="http://www.w3.org/TR/css3-transforms/#two-d-transform-functions">
    <meta name="flags" content="dom">
    <meta name="assert" content="The transform should be translate(100px,100px)"> 
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>    
</head>
<body>
    <div id="myDiv"></div>
    <div id="log"></div>
    <script>
        // Set the transform 
          // NOTE: At the time this file was authored, the transform property
          // required a prefix. In JS, that prefix would appear as follows:
          // ...style.webkitTransform
        document.getElementById("myDiv").style.webkitTransform = "translate(100px,100px)";
 
        // Verify that the transform was set as expected
          // Note: The transform referenced in the line below requires a CSS style prefix.  
          // In this case, the prefix would appear as follows:
          // ...getPropertyCSSValue("-webkit-transform")
        test(function() {assert_equals(document.getElementById("myDiv").style.getPropertyCSSValue("-webkit-transform").cssText,
                        "translate(100px, 100px)",
                        "transform should be translate(100px,100px)")}, 
                        "Transform_Translate_100px_100px");    
    </script>    
</body>
</html>
